<template>
  <view class="category-list-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="navigateBack">
        <view class="icon icon-left" style="font-size: 28px; color: #333;">‹</view>
      </view>
      <view class="title">{{ categoryName }}</view>
      <view class="placeholder"></view>
    </view>
    
    <!-- 壁纸列表 -->
    <wallpaper-grid 
      :wallpaper-list="wallpapers" 
      :has-more="hasMore" 
      :load-status="loadStatus"
      @wallpaper-click="navigateToDetail"
      @load-more="loadMore"
      @favorite="handleFavorite"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad} from "@dcloudio/uni-app"
import WallpaperGrid from '../../components/wallpaper-grid.vue';

// 状态管理
const wallpapers = ref([]);
const page = ref(1);
const size = ref(20);
const hasMore = ref(true);
const loadStatus = ref('more');
const categoryId = ref('');
const categoryName = ref('');

onLoad((options) => {
  categoryId.value = options?.categoryId || '';
  categoryName.value = options?.categoryName || '';
  if (categoryId.value) {
    loadCategoryWallpapers();
  }
});

// 加载分类壁纸
const loadCategoryWallpapers = async () => {
  try {
    uni.showLoading({ title: '加载中' });
    
    const res = await uniCloud.callFunction({
      name: 'wallpapergetByCategory',
      data: {
        category_id: categoryId,
        page: page.value,
        size: size.value
      }
    });
    
    if (res.result.code === 0) {
      if (page.value === 1) {
        wallpapers.value = res.result.data.list;
      } else {
        wallpapers.value = [...wallpapers.value, ...res.result.data.list];
      }
      
      hasMore.value = res.result.data.hasMore;
      loadStatus.value = 'more';
    } else {
      uni.showToast({ title: res.result.message || '加载失败', icon: 'none' });
    }
  } catch (error) {
    console.error('加载分类壁纸失败:', error);
    uni.showToast({ title: '网络错误，请重试', icon: 'none' });
  } finally {
    uni.hideLoading();
  }
};

// 加载更多
const loadMore = () => {
  if (!hasMore.value || loadStatus.value === 'loading') return;
  
  loadStatus.value = 'loading';
  page.value++;
  loadCategoryWallpapers();
};

// 处理收藏
const handleFavorite = (updatedWallpaper) => {
  // 更新列表中的收藏状态
  const index = wallpapers.value.findIndex(item => item._id === updatedWallpaper._id);
  if (index !== -1) {
    wallpapers.value[index].is_favorite = updatedWallpaper.is_favorite;
    wallpapers.value[index].favorite_count = updatedWallpaper.favorite_count;
  }
};

// 导航到详情页
const navigateToDetail = (wallpaper) => {
  uni.navigateTo({
    url: `/pages/detail/detail?id=${wallpaper._id}`
  });
};

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};
</script>

<style scoped lang="less">
.category-list-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    background-color: #fff;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
    
    .back-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #333;
    }
    
    .placeholder {
      width: 40px;
    }
  }
}
</style>